<input type="hidden" value="60" id="items_per_page"  name="items_per_page"/>
<input type="hidden" value='' id="subject_rate"  name="subject_rate"/>
<input type="hidden" value="" id="htags" name="htags"/>
<input type="hidden" value="" id="htype" name="htype"/>

<script type="text/javascript">
function stripHTMLTagsById(id){
    var StrippedString = jQuery("#"+id).html().replace(/(<([^>]+)>)/ig,"");            
    return StrippedString;
}

function stripHTMLTags(htmlText){
    var StrippedString = htmlText.replace(/(<([^>]+)>)/ig,"");
    return StrippedString;
}

function show(id){
    jQuery("#"+id).show();
}

function hide(id){
    jQuery("#"+id).hide();
}

function remove_select(id,value){
    switch(id){
        case "Gender":
            jQuery('.Gender[value="'+value+'"]').attr('checked', false);
            break;
        case "Age":
            jQuery('.Age[value="'+value+'"]').attr('checked', false);
            break;
        case "Religion":
            jQuery('.Religion[value="'+value+'"]').attr('checked', false);
            break;
        case "Race":
            jQuery('.Race[value="'+value+'"]').attr('checked', false);
            break;
        case "Sexual":
            jQuery('.Sexual[value="'+value+'"]').attr('checked', false);
            break;
        case "Country":
            jQuery('#Country option').eq(0).attr('selected', 'selected');
            break;
        case "State":
            jQuery('#State option').eq(0).attr('selected', 'selected');
            break;
        case "City":
            jQuery('#City option').eq(0).attr('selected', 'selected');
            break;
        case "Occupation":
            jQuery('#Occupation option').eq(0).attr('selected', 'selected');
            break;
        case "Pet":
            jQuery('#Pet option').eq(0).attr('selected', 'selected');
            break;
        case "Parent":
            jQuery('#Parent option').eq(0).attr('selected', 'selected');
            break;
        case "Education":
            jQuery('.Education[value="'+value+'"]').attr('checked', false);
            break;
        case "Income":
            jQuery('.Income[value="'+value+'"]').attr('checked', false);
            break;
        default:
            break;
    }
}

function remove_sel_show(id){
    jQuery("#"+id).parent().remove();
}

function urt_done_tree(){
    jQuery("#htags").val("");
    var sumTxt = jQuery("#htags").val();
    var arr_tags = new Array();
    var count = 0;
    jQuery(".jstree-clicked").each(function (i) {        
        sumTxt += stripHTMLTags( jQuery(this).html() )+"|";
        arr_tags[count++] = stripHTMLTags( jQuery(this).html() );
    });
    jQuery("#htags").val(sumTxt);
    for(var i=0;i<3; i++)
        jQuery("#tag_name_"+(i+1)).html('');
    for(var i=0;i<3 && i<arr_tags.length; i++)
        jQuery("#tag_name_"+(i+1)).html(arr_tags[i]);
}

function doSpecialCheck(id){
    jQuery(".Type").each(function (i) {
        if(jQuery(this).attr("checked"))
            jQuery(this).attr("checked",false);
    });
    jQuery("#"+id).attr("checked",true);
}

function search(){
    var arr_result_gender = new Array();
    var arr_result_age = new Array();
    var arr_result_religion = new Array();
    var arr_result_race = new Array();
    var arr_result_sexual = new Array();

    var arr_result_country = new Array();
    var arr_result_state = new Array();
    var arr_result_city = new Array();
    var arr_result_occupation = new Array();
    var arr_result_pet = new Array();
    var arr_result_parent = new Array();

    var arr_result_education = new Array();
    var arr_result_income = new Array();

    var tmp_obj = new Object();

    var htags = jQuery("#htags").val();
    if(htags.length>0) htags = htags.slice(0, - 1);
    
    var htype = "";
    jQuery(".Type").each(function (i) {
        if(jQuery(this).attr("checked"))
            htype = jQuery(this).val();
    });

    var hgender = "";
    jQuery(".Gender").each(function (i) {
        if(jQuery(this).attr("checked")){
            hgender += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_gender[arr_result_gender.length] = tmp_obj;
        }
    });
    if(hgender.length>0) hgender = hgender.slice(0, - 1);

    var hage = "";
    jQuery(".Age").each(function (i) {
        if(jQuery(this).attr("checked")){
            hage += jQuery(this).val()+"|";                
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_age[arr_result_age.length] = tmp_obj;        
        }           
    });
    if(hage.length>0) hage = hage.slice(0, - 1);

    var hreligion = "";
    jQuery(".Religion").each(function (i) {
        if(jQuery(this).attr("checked")){
            hreligion += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_religion[arr_result_religion.length] = tmp_obj; 
        }
    });
    if(hreligion.length>0) hreligion = hreligion.slice(0, - 1);

    var hrace = "";
    jQuery(".Race").each(function (i) {
        if(jQuery(this).attr("checked")){
            hrace += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_race[arr_result_race.length] = tmp_obj; 
        }
    });
    if(hrace.length>0) hrace = hrace.slice(0, - 1);

    var hsexual = "";
    jQuery(".Sexual").each(function (i) {
        if(jQuery(this).attr("checked")){
            hsexual += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_sexual[arr_result_sexual.length] = tmp_obj;
        }
    });
    if(hsexual.length>0) hsexual = hsexual.slice(0, - 1);

    var hcountry = jQuery("#Country").val();
    var hstate = jQuery("#State").val();
    var hcity = jQuery("#City").val();
    var hoccupation = jQuery("#Occupation").val();
    var hpet = jQuery("#Pet").val();
    var hparent = jQuery("#Parent").val();
    if(hcountry!=0){
        tmp_obj = new Object();
        tmp_obj.val = hcountry;
        tmp_obj.txt = jQuery('#Country option:selected').text();
        arr_result_country[arr_result_country.length] = tmp_obj;
    }
    if(hstate!=0){
        tmp_obj = new Object();
        tmp_obj.val = hstate;
        tmp_obj.txt = jQuery('#State option:selected').text();
        arr_result_state[arr_result_state.length] = tmp_obj;
    }
    if(hcity!=0){
        tmp_obj = new Object();
        tmp_obj.val = hcity;
        tmp_obj.txt = jQuery('#City option:selected').text();
        arr_result_city[arr_result_city.length] = tmp_obj;
    }
    if(hoccupation!=0){
        tmp_obj = new Object();
        tmp_obj.val = hoccupation;
        tmp_obj.txt = jQuery('#Occupation option:selected').text();
        arr_result_occupation[arr_result_occupation.length] = tmp_obj;
    }
    if(hpet!=0){
        tmp_obj = new Object();
        tmp_obj.val = hpet;
        tmp_obj.txt = "Pet: "+jQuery('#Pet option:selected').text();
        arr_result_pet[arr_result_pet.length] = tmp_obj;
    }
    if(hparent!=0){
        tmp_obj = new Object();
        tmp_obj.val = hparent;
        tmp_obj.txt = "Parent: "+jQuery('#Parent option:selected').text();
        arr_result_parent[arr_result_parent.length] = tmp_obj;
    }

    var heducation = "";
    jQuery(".Education").each(function (i) {
        if(jQuery(this).attr("checked")){
            heducation += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_education[arr_result_education.length] = tmp_obj;
        }
    });
    if(heducation.length>0) heducation = heducation.slice(0, - 1);

    var hincome = "";
    jQuery(".Income").each(function (i) {
        if(jQuery(this).attr("checked")){
            hincome += jQuery(this).val()+"|";
            tmp_obj = new Object();
            tmp_obj.val = jQuery(this).val();
            tmp_obj.txt = stripHTMLTags(jQuery(this).parent().html());
            arr_result_income[arr_result_income.length] = tmp_obj;
        }
    });
    if(hincome.length>0) hincome = hincome.slice(0, - 1);

    jQuery("#htags").val("");
    var sumTxt = jQuery("#htags").val();
    var arr_tags = new Array();
    var count = 0;
    jQuery(".jstree-clicked").each(function (i) {        
        sumTxt += stripHTMLTags( jQuery(this).html() )+"|";
        arr_tags[count++] = stripHTMLTags( jQuery(this).html() );
    });
    jQuery("#htags").val(sumTxt);

    jQuery("#search_condition").html("");
    for(var i=0;i<3 && i<arr_tags.length; i++)
        /*jQuery("#search_condition").append('<li><span id="remove_sel_tag_"'+(i+1)+'>&times;</span>'+arr_tags[i]+'</li>');*/
        jQuery("#search_condition").append('<li>'+arr_tags[i]+'</li>');
    for(var i=0;i<arr_result_gender.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_gender_"+arr_result_gender[i].val+"' onclick='remove_select("+'"Gender"'+","+arr_result_gender[i].val+"); remove_sel_show("+'"remove_sel_gender_'+arr_result_gender[i].val+'"'+")'>&times;</span>"+arr_result_gender[i].txt+"</li>");
    for(var i=0;i<arr_result_age.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_age_"+arr_result_age[i].val+"' onclick='remove_select("+'"Age"'+","+arr_result_age[i].val+"); remove_sel_show("+'"remove_sel_age_'+arr_result_age[i].val+'"'+")'>&times;</span>"+arr_result_age[i].txt+"</li>");
    for(var i=0;i<arr_result_religion.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_religion_"+arr_result_religion[i].val+"' onclick='remove_select("+'"Religion"'+","+arr_result_religion[i].val+"); remove_sel_show("+'"remove_sel_religion_'+arr_result_religion[i].val+'"'+")'>&times;</span>"+arr_result_religion[i].txt+"</li>");
    for(var i=0;i<arr_result_race.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_race_"+arr_result_race[i].val+"' onclick='remove_select("+'"Race"'+","+arr_result_race[i].val+"); remove_sel_show("+'"remove_sel_race_'+arr_result_race[i].val+'"'+")'>&times;</span>"+arr_result_race[i].txt+"</li>");
    for(var i=0;i<arr_result_sexual.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_sexual_"+arr_result_sexual[i].val+"' onclick='remove_select("+'"Sexual"'+","+arr_result_sexual[i].val+"); remove_sel_show("+'"remove_sel_sexual_'+arr_result_sexual[i].val+'"'+")'>&times;</span>"+arr_result_sexual[i].txt+"</li>");
    for(var i=0;i<arr_result_country.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_country_"+arr_result_country[i].val+"' onclick='remove_select("+'"Country"'+",0); remove_sel_show("+'"remove_sel_country_'+arr_result_country[i].val+'"'+")'>&times;</span>"+arr_result_country[i].txt+"</li>");
    for(var i=0;i<arr_result_state.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_state_"+arr_result_state[i].val+"' onclick='remove_select("+'"State"'+",0); remove_sel_show("+'"remove_sel_state_'+arr_result_state[i].val+'"'+")'>&times;</span>"+arr_result_state[i].txt+"</li>");
    for(var i=0;i<arr_result_city.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_city_"+arr_result_city[i].val+"' onclick='remove_select("+'"City"'+",0); remove_sel_show("+'"remove_sel_city_'+arr_result_city[i].val+'"'+")'>&times;</span>"+arr_result_city[i].txt+"</li>");
    for(var i=0;i<arr_result_occupation.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_occupation_"+arr_result_occupation[i].val+"' onclick='remove_select("+'"Occupation"'+",0); remove_sel_show("+'"remove_sel_occupation_'+arr_result_occupation[i].val+'"'+")'>&times;</span>"+arr_result_occupation[i].txt+"</li>");
    for(var i=0;i<arr_result_pet.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_pet_"+arr_result_pet[i].val+"' onclick='remove_select("+'"Pet"'+",0); remove_sel_show("+'"remove_sel_pet_'+arr_result_pet[i].val+'"'+")'>&times;</span>"+arr_result_pet[i].txt+"</li>");
    for(var i=0;i<arr_result_parent.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_parent_"+arr_result_parent[i].val+"' onclick='remove_select("+'"Parent"'+",0); remove_sel_show("+'"remove_sel_parent_'+arr_result_parent[i].val+'"'+")'>&times;</span>"+arr_result_parent[i].txt+"</li>");
    for(var i=0;i<arr_result_education.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_education_"+arr_result_education[i].val+"' onclick='remove_select("+'"Education"'+","+arr_result_education[i].val+"); remove_sel_show("+'"remove_sel_education_'+arr_result_education[i].val+'"'+")'>&times;</span>"+arr_result_education[i].txt+"</li>");
    for(var i=0;i<arr_result_income.length;i++)
        jQuery("#search_condition").append("<li><span id='remove_sel_income_"+arr_result_income[i].val+"' onclick='remove_select("+'"Income"'+","+arr_result_income[i].val+"); remove_sel_show("+'"remove_sel_income_'+arr_result_income[i].val+'"'+")'>&times;</span>"+arr_result_income[i].txt+"</li>");

    $.ajax({
        type: 'POST',
        url: 'urt',
        data: { 
                htags: htags,
                htype: htype,
                hgender: hgender,
                hage: hage,
                hreligion: hreligion,
                hrace: hrace,
                hsexual: hsexual,
                hcountry: hcountry,
                hstate: hstate,
                hcity: hcity,
                hoccupation: hoccupation,
                hpet: hpet,
                hparent: hparent,
                heducation: heducation,
                hincome: hincome
                },
        success: function(data) {
            // Create pagination element with options
            var optInit = {callback: pageSelectCallback};
            optInit.items_per_page = 60;
            optInit.num_display_entries = 10;
            optInit.num_edge_entries = 2;
            optInit.prev_text = "Prev";
            optInit.next_text = "Next";       
            //TEST SERVER DB
            //alert(data);
            jQuery("#subject_rate").val(data);            
            var mems = jQuery.parseJSON(data);
            jQuery("#subject_total").html(mems.length + " subjects total");
            jQuery("#Pagination").pagination(mems.length, optInit);
        },
        dataType: "text"//returned data type
    });
}

    /**
    * Callback function that displays the content.
    *
    * Gets called every time the user clicks on a pagination link.
    *
    * @param {int}page_index New Page index
    * @param {jQuery} jq the container with the pagination links as a jQuery object
    */
    function pageSelectCallback(page_index, jq){
        // Get number of elements per pagionation page from form
        var items_per_page = $('#items_per_page').val();
        var newcontent = '';
        var newtbl1 = '';
        var newtbl2 = '';
        var newtbl3 = '';

        var json_mems = jQuery("#subject_rate").val();
        var mems = jQuery.parseJSON(json_mems);

        var max_elem = Math.min((page_index+1) * items_per_page, mems.length);
        // Iterate through a selection of the content and build an HTML string
        var ii = 1;
        var stype = "";
            jQuery(".Type").each(function (i) {
                if(jQuery(this).attr("checked"))
                    stype = jQuery(this).val();
            });
        for(var i=page_index*items_per_page;i<max_elem;i++)
        {
            /*newcontent += '<dt>' + mems[i].subject_id + '</dt>';
            newcontent += '<dd class="state">' + mems[i].subject_name + '</dd>';
            newcontent += '<dd class="party">' + mems[i].max_rate + '</dd>';
            newcontent += '<dd class="party">' + mems[i].min_rate + '</dd>';
            newcontent += '<dd class="party">' + mems[i].avg_rate + '</dd>';*/
            
            var showed_rate = mems[i].max_rate;
            switch(stype){
                case "0":
                    showed_rate = mems[i].max_rate;
                    break;
                case "1":
                    showed_rate = mems[i].min_rate;
                    break;
                case "2":
                    showed_rate = mems[i].frequently;
                    break;
                default:
                    showed_rate = mems[i].max_rate;
                    break;
            }
            if(i<=page_index*items_per_page+19){
                newtbl1 += '<tr>';
                newtbl1 += '<td>'+ (i+1) +'.&nbsp;</td>';
                newtbl1 += '<td>'+ mems[i].subject_name +'</td>';
                newtbl1 += '<td>'+ showed_rate +'</td>';
                newtbl1 += '</tr>';
            }else if(i<=page_index*items_per_page+39){
                newtbl2 += '<tr>';
                newtbl2 += '<td>'+ (i+1) +'.&nbsp;</td>';
                newtbl2 += '<td>'+ mems[i].subject_name +'</td>';
                newtbl2 += '<td>'+ showed_rate +'</td>';
                newtbl2 += '</tr>';
            }else{
                newtbl3 += '<tr>';
                newtbl3 += '<td>'+ (i+1) +'.&nbsp;</td>';
                newtbl3 += '<td>'+ mems[i].subject_name +'</td>';
                newtbl3 += '<td>'+ showed_rate +'</td>';
                newtbl3 += '</tr>';
            }
            ii++;
        }
        // Replace old content with new content        
        jQuery('#results_tbl3').html(newtbl3);
        jQuery('#results_tbl2').html(newtbl2);
        jQuery('#results_tbl1').html(newtbl1);

        /*var max_elem = Math.min((page_index+1) * items_per_page, members.length);
        // Iterate through a selection of the content and build an HTML string
        for(var i=page_index*items_per_page;i<max_elem;i++)
        {
            newcontent += '<dt>' + members[i][0] + '</dt>';
            newcontent += '<dd class="state">' + members[i][2] + '</dd>';
            newcontent += '<dd class="party">' + members[i][3] + '</dd>';
        }*/
        // Replace old content with new content
        //jQuery('#Searchresult').html(newcontent);

        // Prevent click eventpropagation
        return false;
    }

    // When document has loaded, initialize pagination and form
    jQuery(document).ready(function(){
        // Create pagination element with options
        var optInit = {callback: pageSelectCallback};
        optInit.items_per_page = 5;
        optInit.num_display_entries = 10;
        optInit.num_edge_entries = 2;
        optInit.prev_text = "Prev";
        optInit.next_text = "Next";       
        
        //jQuery("#Pagination").pagination(members.length, optInit);
    });

</script>

<!-- USER INFO -->
<div>    
    <div class=framebox_quick_profile style="padding-bottom:20px;border-bottom:solid 5px #00aedb;">
        <dl>
                    <?php                                    
                        $thumbnail = $this->PhpThumb->generate(
                            array(
                                'save_path' => WWW_ROOT . 'img/uploads/Moderators/thumbs',
                                // Where to save the thumbnail. (Make sure it is writable by the web server)

                                'display_path' => 'uploads/Moderators/thumbs',
                                // The web accessible path to the directory that the thumbnail lives in after its created.

                                'error_image_path' => 'img/error.jpg',
                                // The default image to display if something goes wrong while generating a thumbnail. 

                                'src' => WWW_ROOT . "img/uploads/Moderators/" . $access->getmy('image'),
                                // The source image to be converted into a thumbnail.
                                // From here on out, you can pass any standard phpThumb parameters

                                'w' => 165,
                                'h' => 165,
                                'q' => 100,
                                'zc' => 1
                                //'fltr'=>array('ric|4|4')
                            )
                        );

                    ?>        
                    <dt><?php echo $this->Html->image($thumbnail['src'], array('width' => $thumbnail['w'], 'height' => $thumbnail['h'])); ?></dt>
                    <dd>
                            <h2><?php echo $get_user_infor['firstname']. ' ' . $get_user_infor['lastname']; ?></h2>
                            <table>
                                    <tr>
                                            <td colspan="2" width="30%">Ranks <span blue class=medium>#<?php echo $rank['rank'] ?></span> in points</td>
                                            <td width="70%">level: <span blue class=large><?php echo $level ?></span></td>
                                    </tr>
                                    <tr>
                                            <td width="30%">has <span blue><?php echo $points ?></span> points</td>
                                            <td width="30%">rated <span blue><?php echo $subjects_rated ?></span> subjects</td>
                                            <td width="30%">added <span blue><?php echo $subject_added ?></span> subjects</td>
                                    </tr>
                                    <tr>
                                            <td colspan="3">Rating the universe since: March 14, 2011</td>
                                    </tr>
                            </table>
                    </dd>
            </dl>
    </div>
</div>
<!-- END USER INFO -->

<!-- SEARCH TOOL-->
<div id="search_tool" class="urt_tool">
    <!-- Tittle -->
    <div class="urt_review">
        <div class="urt_review_child"><strong>The Universal Research Tool</strong> is a way for the user to sort and cross reference all of the data on our site.</div>
        <div class="urt_review_child">It's the best way to quickly investigate and explore the strange and ever-changing trends of the world.</div>
    </div>
    <br/>
    <div class="clear"></div>
    <!-- END Tittle -->

    <!-- Search Tag -->
    <div class="urt_tree_tool_container">
        <div class="urt_tree_tool_show"><a href="#" onclick="show('tree_tool');hide('search_tool');hide('result_zone');"><img src="<?php echo $this->webroot ?>assets/images/icon_searchtag.png" alt="icon_searchtag" width="64"></a>Search Tag Tree</div>
        <div class="urt_tree_tool_tagtxt" id="tag_name_1"></div>
        <div class="urt_tree_tool_tagtxt" id="tag_name_2"></div>
        <div class="urt_tree_tool_tagtxt" id="tag_name_3"></div>
    </div>
    <div class="clear"></div>
    <!-- END Search Tag -->

    <!-- Type - Gender - Age-->
    <div class="urt_col_container">
        <div class="urt_col1">
            <div class="urt_subcol1">Type of Results</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Type0" name="Type0" class="Type" value="0" onclick="doSpecialCheck('Type0')"/><span>Highest U-Rating</span></div>
                <div><input type="checkbox" id="Type1" name="Type1" class="Type" value="1" onclick="doSpecialCheck('Type1')"/><span>Lowest U-Rating</span></div>
                <div><input type="checkbox" id="Type2" name="Type2" class="Type" value="2" onclick="doSpecialCheck('Type2')"/><span>Most Frequently Rated</span></div>
            </div>
        </div>

        <div class="urt_col2">
            <div class="urt_subcol1">Gender</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Gender" name="Gender" value="1" class="Gender" /><span>Male</span></div>
                <div><input type="checkbox" id="Gender" name="Gender" value="2" class="Gender" /><span>Female</span></div>
                <div><input type="checkbox" id="Gender" name="Gender" value="3" class="Gender" /><span>Transexual</span></div>
            </div>
        </div>

        <div class="urt_col3">
            <div class="urt_subcol1">Age Group</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" class="Age" value="1"/><span>Teen</span></div>
                <div><input type="checkbox" class="Age" value="20"/><span>20-29</span></div>
                <div><input type="checkbox" class="Age" value="30"/><span>30-39</span></div>
                <div><input type="checkbox" class="Age" value="40"/><span>40-49</span></div>
                <div><input type="checkbox" class="Age" value="50"/><span>50-59</span></div>
                <div><input type="checkbox" class="Age" value="60"/><span>60+</span></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- END Type - Gender - Age id="Age" name="Age" -->

    <!-- Religion - Race - Sexual -->
    <div class="urt_col_container">
        <div class="urt_col1">
            <div class="urt_subcol1">Religion</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="1"/><span>Atheism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="2"/><span>Buddhism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="3"/><span>Christianity</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="4"/><span>Hinduism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="5"/><span>Islam</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="6"/><span>Jainism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="7" /><span>Jehovah's Witnesses</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="8"/><span>Judaism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="9"/><span>Mormonism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="10"/><span>Paganism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="11" /><span>Rastafari</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="12"/><span>Santeria</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="13"/><span>Shinto</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="14" /><span>Sikhism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="15" /><span>Spiritualism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="16"/><span>Taoism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="17"/><span>Unitarianism</span></div>
                <div><input type="checkbox" id="Religion" name="Religion" class="Religion" value="18" /><span>Zoroastriansm</span></div>
            </div>
        </div>

        <div class="urt_col2">
            <div class="urt_subcol1">Race</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="1"/><span>White/Caucasian</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="2"/><span>Black/African American</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="3"/><span>Latino/Hispanic</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="4"/><span>Asian/Asian American</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="5"/><span>Native American</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="6"/><span>Middle Eastern</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="7"/><span>Indian</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="8"/><span>Pacific Islander</span></div>
                <div><input type="checkbox" id="Race" name="Race" class="Race" value="9"/><span>African</span></div>
            </div>
        </div>

        <div class="urt_col3">
            <div class="urt_subcol1">Sexual</div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="1"/><span>Heterosexuality</span></div>
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="2"/><span>Homosexuality</span></div>
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="3"/><span>Bisexuality</span></div>
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="4"/><span>Asexuality</span></div>
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="5"/><span>Transgender</span></div>
                <div><input type="checkbox" id="Sexual" name="Sexual" class="Sexual" value="6"/><span>Other</span></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- END Religion - Race - Sexual -->

    <!-- Country - State - City -->
    <div class="urt_col_container">
        <div class="urt_col1">
            <div class="urt_subcol1">
                Country
            </div>
            <div class="urt_subcol2">
                <select name="Country" id="Country">
                    <option value="0">Select a Country</option>
                    <?php
                    $countries = explode(",", $get_subject['Country']);
                    $count = 1;
                    foreach ($countries as $item) {
                        ?>
                        <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                    <?php } ?>
                </select>
            </div>
        </div>

        <div class="urt_col2">
            <div class="urt_subcol1">
                State
            </div>
            <div class="urt_subcol2">
                <select name="State" id="State">
                    <option value="0">Select a State</option>
                    <?php
                    $state = explode(",", $get_subject['State']);
                    $count = 1;
                    foreach ($state as $item) {
                        ?>
                        <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                    <?php } ?>
                </select>
            </div>
        </div>

        <div class="urt_col3">
            <div class="urt_subcol1">
                City
            </div>
            <div class="urt_subcol2">
                <select name="City" id="City">
                    <option value="0">Select a City</option>
                    <?php
                    $city = explode(",", $get_subject['City']);
                    $count = 1;
                    foreach ($city as $item) {
                        ?>
                        <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                    <?php } ?>
                </select>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- END Country - State - City -->

    <!-- Occupation - Pet - Parent - Education - Income -->
    <div class="urt_col_container">
        <div class="urt_col1">
            <div>
                <div class="urt_subcol1">
                    Occupation
                </div>
                <div class="urt_subcol2">
                    <select name="Occupation" id="Occupation">
                        <option value="0">Select an Occupation</option>
                        <?php
                        $occupation = explode(",", $get_subject['Occupation']);
                        $count = 1;
                        foreach ($occupation as $item) {
                            ?>
                            <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>

            <div>
                <div class="urt_subcol1">
                    Pet Owner
                </div>
                <div class="urt_subcol2">
                    <select name="Pet" id="Pet">
                        <option value="0">Select an answer</option>
                        <?php
                        $pet = explode(",", $get_subject['Pet']);
                        $count = 1;
                        foreach ($pet as $item) {
                            ?>
                            <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>

            <div>
                <div class="urt_subcol1">
                    Are you parent?
                </div>
                <div class="urt_subcol2">
                    <select name="Parent" id="Parent">
                        <option value="0">Select an answer</option>
                        <?php
                        $parent = explode(",", $get_subject['Parent']);
                        $count = 1;
                        foreach ($parent as $item) {
                            ?>
                            <option value="<?echo $count++;?>"> <?php echo $item;?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
        </div>

        <div class="urt_col2">
            <div class="urt_subcol1">
                Education
            </div>
            <div class="urt_subcol2">
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="1"/><span>Less than 9th Grade</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="2"/><span>High School Drop Out</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="3"/><span>High School Graduate</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="4"/><span>Some College</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="5"/><span>Associates Degree</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="6"/><span>Bachelor's Degree or More</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="7"/><span>Masters Degree</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="8"/><span>Professional Degree</span></div>
                <div><input type="checkbox" id="Education" name="Education" class="Education" value="9"/><span>Doctoral Degree</span></div>
            </div>
        </div>

        <div class="urt_col13">
            <div class="urt_subcol1">
                Income
            </div>
            <div class="urt_subcol2_sp">
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="1"/><span>under $25000/yr</span></div>
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="2"/><span>$25000 - $50000</span></div>
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="3"/><span>$50000 - $75000</span></div>
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="4"/><span>$75000 - $150000</span></div>
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="5"/><span>$150000 - $250000</span></div>
                <div><input type="checkbox" id="Income" name="Income" class="Income" value="6"/><span>$250000 or more</span></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- END Occupation - Pet - Parent - Education - Income -->

    <!-- Save -->
    <div>        
        <input type="button" value="Save" class="urt_btn" onclick="hide('tree_tool');hide('search_tool');show('result_zone');search();"/>
    </div>
    <!-- END Save -->
</div>
<!-- END SEARCH TOOL-->


<!-- TREE TOOL-->
<div id="tree_tool" class="urt_tree_tool" style="display:none">
    <?php
        echo $this->javascript->link(array('jstree/jquery.cookie', 'jstree/jquery.hotkeys', 'jstree/jquery.jstree'));
        echo $this->Html->css('jstree/style');
    ?>
    <div id='search_tag' class="search_tag_img">
        <h1>
                <img src="<?php echo $this->base ?>/assets/images/icon_searchtag.png" alt="icon_searchtag" width="81" height="81" />
                search tag tree
        </h1>

        <div id="description">
            <p>&nbsp;</p>

            <!-- the tree container (notice NOT an UL node) -->
            <div id="tag_tree" class="tag_tree" style="height:1000px;overflow: hidden"></div>
            <!-- JavaScript neccessary for the tree -->
            <script type="text/javascript" class="source below">
            $(function () {
            var base_url=$('#base-url').text();
            $("#tag_tree")
                    .bind("before.jstree", function (e, data) {
                            $("#alog").append(data.func + "<br />");
                    })
                    .jstree({ 
                            // List of active plugins
                            "plugins" : ["themes","json_data","cookies","ui"],

                            // I usually configure the plugin that handles the data first
                            // This example uses JSON as it is most common
                            "json_data" : { 
                                    // This tree is ajax enabled - as this is most common, and maybe a bit more complex
                                    // All the options are almost the same as jQuery's AJAX (read the docs)
                                    "ajax" : {
                                            // the URL to fetch the data
                                            "url" : base_url+"/profiles/f_server",
                                            // the `data` function is executed in the instance's scope
                                            // the parameter is the node being loaded 
                                            // (may be -1, 0, or undefined when loading the root nodes)
                                            "data" : function (n) {
                                                    // the result is fed to the AJAX request `data` option
                                                    return { 
                                                            "operation" : "get_children_in_fr", 
                                                            "id" : n.attr ? n.attr("id").replace("node_","") : 1                                              
                                                    }; 
                                            },
                                            "success" : function (response_arr) {
                                            }
                                    }
                            },    
                            // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

                            // the UI plugin - it handles selecting/deselecting/hovering nodes
                            "ui" : {
                                    // this makes the node with ID node_4 selected onload
                                    "select_limit" : 3                        
                            },
                            // the core plugin - not many options here
                            "core" : { 
                                    // just open those two nodes up
                                    // as this is an AJAX enabled tree, both will be downloaded from the server                            
                            }
                    })
                    .bind("select_node.jstree", function (event, data) {
                        var text = jQuery("#"+data.rslt.obj.attr("id")+" > a").html();
                        var sumTxt = jQuery("#htags").val();
                        sumTxt += stripHTMLTags(text)+"|";
                        jQuery("#htags").val(sumTxt);
                    })
            });
            </script>
            <!-- END OF TREE VIEW PLUGIN -->
        </div><!-- end search_tag-->
        <div>
            <input type="button" class="urt_btn" id="urt_done_tree" name="urt_done_tree" value="select" onclick="hide('tree_tool');show('search_tool');hide('result_zone');urt_done_tree();"/>
        </div>
    </div><!-- end description-->
</div><!-- end tree_tool-->
<!-- END TREE TOOL-->

<!-- RESULT ZONE-->
<div id="result_zone" style="display:none" >
    <!-- RESULT TOOL -->
    <div id=results>
            <dl>
                    <dt>Results:</dt>
                    <dd><span id="subject_total"></span></dd>
            </dl>

            <div class=clear></div>

            <div class='col1 search_panel' id="search_panel">
                    <h2>You search for:</h2>
                    <ul id="search_condition" name="search_condition">
                    <!--
                            <li><span>&times;</span> Male</li>
                            <li><span>&times;</span> 20 - 29 years of age</li>
                            <li><span>&times;</span> United States</li>
                            <li><span>&times;</span> Pet Owner</li>
                            <li><span>&times;</span> Tag: Something else</li>
                    -->
                    </ul>
                    <a onclick="hide('tree_tool');show('search_tool');hide('result_zone');" style="cursor:pointer">&laquo; Back to search</a>
            </div>

            <div class='col1 results_box' id="results_box1">
                <table width="100%" id="results_tbl1">
                    
                </table>
            </div>

            <div class='col1 results_box' id="results_box2">
                <table width="100%" id="results_tbl2">
                    
                </table>
            </div>

            <div class='col1 results_box' id="results_box3">
                <table width="100%" id="results_tbl3">
                    
                </table>
            </div> 

            <br style="clear:both;" />
            <div id="Searchresult"></div>
            <div id="Pagination" class="pagination col2 right"/>

    </div>
    <div>        
        <!-- <input type="button" class="urt_btn" value="search again" onclick="hide('tree_tool');show('search_tool');hide('result_zone');"/> -->
    </div>
</div>
<!-- END RESULT ZONE-->